<script setup lang="ts">
import type { CommentVo } from "@/type";
import { onMounted, ref } from "vue";

defineProps({
  comments: {
    type: Array<CommentVo>,
    required: true,
  },
  depth: {
    type: Number,
    default: 0,
  },
});
const emit = defineEmits<{
  (e: "reply", comment: CommentVo): void;
}>();
const handleReply = (comment: CommentVo) => {
  emit("reply", comment);
};
const isMobile = ref(false);

const checkMobile = () => {
  isMobile.value = window.innerWidth < 640;
};

onMounted(() => {
  checkMobile();
  window.addEventListener("resize", checkMobile);
});
</script>

<template>
  <div class="comment-container space-y-2 sm:space-y-4">
    <div v-for="comment in comments" :key="comment.id" class="relative">
      <!-- 评论主体 -->
      <div
        class="bg-gray-50 p-2 sm:p-4 rounded-lg transition-all duration-200"
        :class="{
          'ml-6 sm:ml-10': depth > 0,
          'border-l-2 border-gray-200': depth > 0,
          'hover:bg-gray-100': !isMobile,
        }"
      >
        <!-- 评论头部 -->
        <div class="flex items-start mb-1 sm:mb-2">
          <img
            :src="comment.avatar"
            alt="头像"
            class="w-5 h-5 sm:w-8 sm:h-8 rounded-full flex-shrink-0"
          />
          <div class="ml-2 overflow-hidden flex-1">
            <div class="flex flex-col sm:flex-row sm:items-baseline">
              <div>
                <span class="font-medium text-xs sm:text-base truncate">{{
                  comment.nickname
                }}</span>
                <!-- 回复关系 -->
                <template v-if="comment.parentComment">
                  <span class="text-gray-500 text-2xs sm:text-sm mx-1"
                    >回复</span
                  >
                  <span
                    class="text-blue-500 text-2xs sm:text-sm font-medium truncate"
                  >
                    {{ comment.parentComment.nickname }}
                  </span>
                </template>
              </div>
              <span
                class="text-gray-400 text-2xs sm:text-sm sm:ml-2 whitespace-nowrap"
              >
                {{ comment.createdAt }}
              </span>
            </div>
          </div>
        </div>
        <!-- 评论内容 -->
        <p
          class="text-gray-500 text-xs sm:text-sm mb-1 sm:mb-2 break-words leading-relaxed"
        >
          <span v-html="comment.content"></span>
        </p>

        <!-- 回复按钮 -->
        <div class="flex justify-end">
          <button
            @click="handleReply(comment)"
            class="text-2xs sm:text-sm text-blue-500 hover:text-blue-600 flex items-center px-1 py-0.5 rounded"
          >
            <svg
              class="w-2.5 h-2.5 sm:w-3.5 sm:h-3.5 mr-0.5"
              fill="none"
              stroke="currentColor"
              viewBox="0 0 24 24"
            >
              <path
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="2"
                d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"
              />
            </svg>
            回复
          </button>
        </div>
      </div>

      <!-- 子评论容器 -->
      <div
        v-if="comment?.children.length > 0"
        class="relative mt-2 sm:mt-3 pl-2 sm:pl-3 before:absolute before:top-0 before:bottom-4 before:left-0 before:w-0.5 before:bg-gray-200"
      >
        <!-- 递归渲染子评论 -->
        <comment-tree
          :comments="comment.children"
          :depth="depth + 1"
          @reply="$emit('reply', $event)"
        />
      </div>
    </div>
  </div>
</template>

<style scoped>
/* 移动端优化 */
@media (max-width: 640px) {
  .comment-container {
    font-size: 0.875rem;
  }

  /* 缩小子评论缩进 */
  :deep(.ml-6) {
    margin-left: 0.75rem;
  }

  /* 优化时间显示 */
  .text-2xs {
    font-size: 0.625rem;
    line-height: 1rem;
  }

  /* 触摸区域优化 */
  button {
    min-width: 44px;
    min-height: 44px;
  }
}

/* 暗色模式支持 */
@media (prefers-color-scheme: dark) {
  .bg-gray-50 {
    background-color: #2d3748;
  }

  .hover\:bg-gray-100:hover {
    background-color: #4a5568;
  }

  .text-gray-700 {
    color: #e2e8f0;
  }

  .border-gray-200 {
    border-color: #4a5568;
  }

  .before\:bg-gray-200::before {
    background-color: #4a5568;
  }
}
</style>
